<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <title>Timeline</title>
  <!--<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>-->


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="timeline-content" id="drag-content">
<ul class="timeline" id="timeline">
  <li class="li " v-for="item in items" v-bind:class="{complete:item.time<=timenow}" v-on:click='timeClick(item.time)'>

    <div class="status">
      <h4>{{item.time}}</h4>
    </div>
  </li>

 </ul>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  <script src="js/vue.js"></script>
  <script src="js/initVue.js"></script>
  <script src="js/index.js"></script>



</body>
</html>
